<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8" />
	<title>首页</title>
	<link type="text/css" th:href="@{/html/css/bootstrap.min.css}" rel="stylesheet" />
	<link type="text/css" th:href="@{/html/css/treeview.min.css}" rel="stylesheet" />
	<script type="text/javascript" th:src="@{/html/js/jquery-1.12.4.js}"></script>
	<script type="text/javascript" th:src="@{/html/js/bootstrap.min.js}"></script>
	<script type="text/javascript" th:src="@{/html/js/treeview.min.js}"></script>
	<script type="text/javascript" th:src="@{/html/js/vue.min.js}"></script>
	<script type="text/javascript" th:src="@{/html/js/axios.min.js}"></script>
</head>
<body>
	<div id="app" class="container" style="margin-top: 10px">	
		<div class="navbar navbar-default">
			<div class="navbar-brand">
				<span>MyMall</span>
			</div>
			<ul class="nav navbar-nav">
				<li><a th:href="@{/home}">首页</a></li>
				<li><a href="javascript:void(0);">设置</a></li>
				<li><a href="javascript:void(0);">帮助</a></li>
			</ul>
			<form class="navbar-form pull-left" style="margin-left: 20px; margin-right: 20px;" v-on:submit.prevent="list(0)">
				<input v-model="gname" type="text" placeholder="请输入关键字" class="form-control" style="width: 260px;"  />
				<select v-model="gtype" class="form-control">
					<option v-for="item in typeOpts" v-bind:value="item.dvalue">{{item.dvalue}}</option>
				</select>
				<button class="btn form-inline">
					<span class="glyphicon glyphicon-search"></span>
				</button>
			</form>
			<ul th:if="${session.user==null}" class="nav navbar-nav">
				<li><a th:href="@{/login}">登录入口</a></li>
				<li><a th:href="@{/regist/cust}">会员注册</a></li>
				<li><a th:href="@{/regist/shop}">商家入驻</a></li>
			</ul>
			<ul th:unless="${session.user==null}" class="nav navbar-nav">
				<li>
					<img th:if="${session.user.role=='ROLE_SHOP'}" class="img-thumbnail" style="height: 45px;"
						th:src="@{/logo/{username}(username=${session.user.username})}" />
					<img th:unless="${session.user.role=='ROLE_SHOP'}" style="height: 45px;"
						th:src="@{/photo/{username}(username=${session.user.username})}" />
				</li>
				<li>
					<a th:href="@{/index}" th:text="${session.user.username}"></a>
				</li>
				<li th:if="${session.user.role=='ROLE_USER'}">
					<input id="username" type="hidden" th:value="${session.user.username}" />
					<a th:href="@{/index}">
						<span class="glyphicon glyphicon-shopping-cart"></span> 
	               		<span class="badge">{{total}}</span>
               		</a>
				</li>
				<li>
					<a th:href="@{/index}">后台管理</a>
				</li>
				<li><a th:href="@{/logout}">安全退出</a></li>
			</ul>
		</div>
		<div style="border-bottom: solid 1px #ccc;" class="col-sm-3" v-for="item in pager.items">
       		<div>
       			<h4 class="center-block">{{item.gname}}</h4>
       			<span style="text-decoration: line-through;">&yen;{{item.gprice}}</span>
       			<span class="alter-info">&yen;{{item.gsale}}</span>
       			<a href="javascript:void(0);" v-on:click="show(item)">查看</a>
       		</div>
       		<img v-bind:src="'/mymall/picture/'+item.gno" style="width: 160px; height: 140px; margin-bottom: 5px;" />
       	</div>
       	<div style="clear: both;">
			<ul class="pagination">
        		<li><span>共有{{pager.count}}数据</span></li>
                <li><span>每页显示{{pager.size}}行</span></li>
                <li><span>第{{pager.index}}页 / 共{{pager.page}}页</span></li>
                <li><a href="javascript:void(0);" v-on:click="list(1)">&laquo;</a></li>
                <li><a href="javascript:void(0);" v-on:click="list(pager.begin-pager.step)">&larr;</a></li>
                <li v-for="n in pager.end-pager.begin+1" v-bind:class="pager.begin+n-1==pager.index?'active':''">
                    <a href="javascript:void(0);" v-on:click="list(pager.begin+n-1)">{{pager.begin+n-1}}</a>
                </li>
                <li><a href="javascript:void(0);" v-on:click="list(pager.begin+pager.step)">&rarr;</a></li>
                <li><a href="javascript:void(0);" v-on:click="list(pager.page)">&raquo;</a></li>
            </ul>
        </div>
        <div class="modal" id="mymodal">
        	<div class="modal-dialog" data-backdrop="static">
	             <div v-if="item!=null" class="modal-content">
	                <div class="modal-header">
	                	<button class="close" data-dismiss="modal">&times;</button>
	                	<h4>商品信息</h4>
	                </div>
					<div class="modal-body" style="height: 420px;" >
						<form class="form-horizontal text-primary">
							<div class="form-group col-sm-12">
								<strong>店铺:</strong>
								<img class="img-rounded" style="height: 40px;" v-bind:src="'/mymall/logo/'+item.gshop" />
								{{item.shopVO.stitle}}
							</div>
							<div class="form-group col-sm-12">
								<strong>货号:</strong>{{item.gno}}
							</div>
							<div class="form-group col-sm-12">
								<strong>名称:</strong>{{item.gname}}
							</div>
							<div class="form-group col-sm-12">
								<strong>分类:</strong>{{item.gtype}}
							</div>
							<div class="form-group col-sm-12">
								<strong>原价:</strong>&yen;{{item.gprice}}
							</div>
							<div class="form-group col-sm-12">
								<strong>售价:</strong>&yen;{{item.gsale}}
							</div>
							<div class="form-group col-sm-12">
								<strong>说明:</strong>{{item.gdesc}}
							</div>
							<div class="form-group col-sm-12">
								<strong>库存:</strong>{{item.gleft}}
							</div>
							<div class="form-group col-sm-12">
								<strong>图片:</strong><img class="img-rounded" style="height: 80px;" v-bind:src="'/mymall/picture/'+item.gno" />
							</div>
						</form>
	                 </div>
	                 <div class="modal-footer">
	                    <button type="button" v-on:click="add(item.gno)" class="btn btn-default">放入购物车</button>
						<button type="button" v-on:click="buy(item)" class="btn btn-default">直接购买</button>
	                 </div>
	             </div>
	        </div>
        </div>
        <div class="modal modal-dialog fade" style="position: absolute;" id="buymodal">
             <div v-if="item!=null" class="modal-content">
                <div class="modal-header">
                     <h4>订单信息</h4>
                </div>
				<div class="modal-body" style="height:100px; margin-bottom: 10px;">
					<img v-bind:src="'/mymall/picture/'+item.gno" style="width: 80px; height: 70px;"></img>
					<span style="margin-right:30px;">{{item.gname}}</span>
					<span style="margin-right:30px;">剩余{{item.gleft}}</span>
					<span style="margin-right:30px;">单价&yen;{{item.gsale}}</span>
					<input type="button" v-on:click="minus()" value="-" />
					<span>{{count}}</span>
					<input type="button" v-on:click="plus()" value="+" />
					<span style="margin-left:30px;margin-right:30px; color:red; font-size: 20px; font-weight: bolder;">总价:&yen;{{sum}}</span>
					<input type="text" v-model="desc" placeholder="您有什么想补充的" class="form-control input-sm"></input>
				</div>	
				<div v-if="addrs!=null" class="modal-body" style="height:200px;">
					<table class="table">
						<thead>
							<tr>
								<th>选择</th>
								<th>发件人</th>
								<th>发件手机号</th>
								<th>收件人</th>
								<th>收件人手机号</th>
								<th>收件人地址</th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="item in addrs">
								<td><input type="radio" name="rdoaddr" v-bind:value="item.addrid" v-bind:checked="item.addrdef"></input></td>
								<td>{{item.senduser}}</td>
								<td>{{item.sendphone}}</td>
								<td>{{item.receiveuser}}</td>
								<td>{{item.receivephone}}</td>
								<td>{{item.receiveaddr}}</td>
							</tr>
						</tbody>
						<tfoot>
							<tr>
								<td class="text-danger" colspan="6">请保证至少有一条收货地址信息</td>
							</tr>
						</tfoot>
					</table>
				</div>
                <div class="modal-footer">
                	<button type="button" class="btn btn-default" v-on:click="pay()">确定</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
             </div>
        </div>
	</div>
	<script type="text/javascript">
    	new Vue({
    		el:"#app",
    		data:{
    			serviceUrl:'http://localhost:8001/myservice',
    			index:1,
    			size:10,
		        step:10,
    			begin:0,
                end:0,
    			pager:{},
    			typeOpts:{},
    			gname:'',
    			gtype:'',
    			item:null,
    			total:0,
    			count:1,
    			sum:0,
    			desc:'',
    			addrs:null
    		},
    		beforeMount:function(){
    			this.addrList();
    			this.typeList();
    			this.list(this.page);
    			this.info();
    		},
    		methods:{
    			addrList:function(){
    				var url = this.serviceUrl+"/cust/list/addr/"+$("#username").val();
    				var self = this;
    				axios.defaults.withCredentials = true;
    				axios.get(url).then(function(res){
    					self.addrs = res.data;
    				});
    			},
    			typeList:function(){
    				var self = this;
    				var url = self.serviceUrl+"/comm/type/list";
    				axios.get(url).then(function(res){
    					self.typeOpts=res.data;
    				});
    			},
    			list:function(page){
    				var self = this;
    				self.page = page<0?0:page;
    				var url = self.serviceUrl+"/comm/good/list?index="+self.index+
    						"&size="+self.size+"&step="+self.step+
    						"&name="+self.gname+"&type="+self.gtype;
  
    				axios.get(url).then(function(res){
    					self.pager = res.data;
    				});
    			},
    			show:function(item){
    				this.item=item;
    				$("#mymodal").modal("show");
    			},
    			info:function(){
    				if($("#username").size()==1){
    					var self = this;
    					var url = self.serviceUrl+"/cust/count/shopcar/"+$("#username").val();
    					axios.defaults.withCredentials = true;
    					axios.get(url).then(function(res){
        					self.total=res.data;
        				});
    				}
    			},
    			add:function(no){
    				if($("#username").size()==0){
    					alert("请先以顾客身份登录");
    					return;
    				}
    				var self = this;
					var url = self.serviceUrl+"/cust/add/shopcar/"+$("#username").val()+"/"+no;
					axios.defaults.withCredentials = true;
					axios.get(url).then(function(res){
						alert(res.data.message);
						if(res.data.code==200){
							self.sum();
							$("#mymodal").modal("hide");
						}
    				});
    			},
    			buy:function(item){
    				if($("#username").size()==0){
    					alert("请先以顾客身份登录");
    					return;
    				}
    				$("#mymodal").modal("hide");
    				this.item=item;
    				this.count=1;
    				this.sum=item.gsale;
    				this.desc='';
    				$("#buymodal").modal("show");
    			},
    			minus:function(){
    				if(this.count>1){
    					this.count--;
    					this.sum=this.item.gsale*this.count;
    				}
    			},
    			plus:function(){
    				this.count++;
					this.sum=this.item.gsale*this.count;
    			},
    			pay:function(comm){
    				if($("input[name='rdoaddr']:checked").length==1){
    					var params = new URLSearchParams();
        				params.append("username",$("#username").val());
        				params.append("gno",this.item.gno);
        				params.append("addrid",$("input[name='rdoaddr']:checked").val());
        				params.append("count",this.count);
        				params.append("desc",this.desc);

        				var url = this.serviceUrl+"/cust/buy/order"
        				var self = this;
        				axios.defaults.withCredentials = true;
        				axios.post(url,params).then(function(res){
        					alert(res.data.message);
        					if(res.data.code==200){
        						$("#buymodal").modal("hide");
        					}
        				});
    				}else{
    					alert("请确保收货地址信息 如果没有请先录入收货地址");
    				}
    			}
    		}
    	});
    </script>
</body>
</html>